<template>
    <div class="bottom-info">
        <div class="bottom-info-title">
            <img class="title-photo" src="@/assets/image/hubt_logo.png" alt="">
            <div class="vertical-line"></div>
            <span class="title-content">绿色智能算力网络湖北省重点实验室（筹）</span>
        </div>
        <div class="bottom-info-text">
            <div>地址：湖北省武汉市洪山区南李路28号</div>
            <div>联系电话：待增</div>
            <div>邮箱：待增</div>
        </div>
    </div>
</template>

<script setup>

</script>

<style scoped>

.bottom-info {
    width: 100%;
    height: 30vh;
    background-color: #005aa0;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.bottom-info-title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 15vh;
    width: 80%;
    border-bottom: 1px solid rgba(240, 240, 240, 0.2);
    border-top: 1px solid rgba(240, 240, 240, 0.2);
    margin-bottom: 20px;
}

.title-photo {
    user-select: none;
    width: 15vw;  /* 图片宽度为父元素宽度的 100% */
    height: auto; /* 高度自动调整，保持宽高比 */
}

.title-content {
    user-select: none;
    color: white;
    font-size: 30px;
    margin-left: 20px;
}

.vertical-line {
    width: 3px; /* 竖线宽度 */
    border-radius: 3px;
    background-color: white; /* 竖线颜色 */
    height: 6vh; /* 竖线高度 */
    margin-left: 20px;
}

.bottom-info-text {
    display: flex;
    gap: 30px;
    color: white;
    font-size: 14px;
}

@media (max-width: 1200px) {
    .title-content {
        font-size: 25px;
    }
}

@media (max-width: 992px) {
    .title-content {
        font-size: 20px;
    }
}

</style>